<!DOCTYPE html>
<html>
<head>
    {{template "header"}}
</head>
<body>
<script>

    let getColumns = function () {
        return [
            {
                view: "radio",
                name: "lang",
                options: ["zh_CN", "en_US"],
                label: gtr("Language"),
                labelWidth: 100,
            },
            {view: "text", name: "module", label: gtr("Module"), css: "nborder-input",},
            {view: "textarea", name: "source", label: gtr("Source text")},
            {view: "textarea", name: "result", label: gtr("Translate result")},
        ]
    }

    let deleteItems = function (items, callback) {
        webix.confirm({
            title: "Operation confirmation",
            ok: "Yes", cancel: "No",
            text: "Confirm to delete? This operation is irreversible.",
            callback: function (ev) {
                if (ev) {
                    webix.ajax().headers({
                        "Content-type":"application/json"
                    }).post('/admin/translate/delete', JSON.stringify(items)).then(function (result) {
                        if (callback)
                            callback()
                    })
                }
            }
        });
    }

    webix.ready(function () {
        let importUrl = '/admin/translate/import'
        let exportUrl = '/admin/translate/export'
        let tableid = webix.uid().toString();
        let uploadid = webix.uid().toString();
        let queryid = webix.uid()
        let reloadData = wxui.reloadDataFunc(tableid, "/admin/translate/query", queryid)
        wxui.initUploadApi(uploadid, importUrl, reloadData);
        webix.ui({
            css: "main-panel",
            padding: 7,
            rows: [
                wxui.getPageToolbar({
                    title: "Translate",
                    icon: "mdi mdi-server",
                    elements: [
                        wxui.getPrimaryButton(tr("translate", "Flush"), 90, false, function () {
                            webix.ajax().get('/admin/translate/flush').then(function (result) {
                                let resp = result.json();
                                webix.message({type: resp.msgtype, text: resp.msg, expire: 3000});
                            })
                        }),
                        wxui.getPrimaryButton(gtr("Create"), 90, false, function () {
                            wxui.openFormWindow({
                                width: 640,
                                height: 480,
                                title: gtr("Create translate"),
                                post: "/admin/translate/add",
                                callback: reloadData,
                                elements: getColumns()
                            }).show();
                        }),
                        wxui.getDangerButton("Remove", 90, false, function () {
                            let items = wxui.getTableCheckedItems(tableid);
                            if (items.length === 0) {
                                webix.message({type: 'error', text: "Please select one", expire: 1500});
                            } else {
                                deleteItems(items, reloadData);
                            }
                        }),
                    ]
                }),
                wxui.getTableQueryCustomForm(queryid, [
                    {
                        cols: [
                            {
                                view: "combo",
                                name: "lang",
                                options: ["zh_CN", "en_US"],
                                label: gtr("Language"),
                                labelWidth: 75,
                                width: 270
                            },
                            {
                                view: "combo",
                                name: "module",
                                options: "/admin/translate/modules",
                                label: gtr("Module"),
                                labelWidth: 75,
                                width: 270
                            },
                            {view: "search", id: "keyword", name: "keyword", placeholder: "Keywords", width: 320},
                            {
                                view: "button",
                                label: gtr("Query"),
                                css: "webix_transparent",
                                type: "icon",
                                icon: "mdi mdi-search-web",
                                borderless: true,
                                width: 100,
                                click: function () {
                                    reloadData()
                                }
                            }, {}
                        ]
                    }
                ]),
                wxui.getDatatable({
                    tableid: tableid,
                    url: '/admin/translate/query',
                    save: '/admin/translate/save',
                    editable: true,
                    columns: [
                        {
                            id: "state",
                            header: {content: "masterCheckbox", css: "center"},
                            headermenu: false,
                            adjust: true, width: 45,
                            css: "center",
                            template: "{common.checkbox()}"
                        },
                        {id: "lang", header: [gtr("Language")], adjust: true, sort: "server"},
                        {id: "module", header: [gtr("Module")], adjust: true, sort: "server"},
                        {id: "source", header: [gtr("Source text")], fillspace: true, sort: "server"},
                        {id: "result", header: [gtr("Translate result (click to modify)")], editor: "popup", fillspace: true, sort: "server"},
                        // {header: {content: "headerMenu"}, headermenu: false, width: 35}
                    ],
                    leftSplit: 1,
                    pager: true,
                    on: {},
                }),
                wxui.getTableFooterBar({
                    tableid: tableid,
                    actions: [

                    ],
                    callback: reloadData
                }),
            ]
        })
    })
</script>
</body>
</html>